<template>
  <div class="logout">
    <h1>注销</h1>
    <p>点击下方按钮以注销当前账户。</p>
    <el-button type="danger" @click="showDialog = true">注销</el-button>

    <!-- 模态框 -->
    <el-dialog
      title="确认注销"
      :visible.sync="showDialog"
      width="30%"
      @close="handleCancel"
    >
      <p>您确定要退出当前账户吗？</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Logout',
  data () {
    return {
      showDialog: false // 控制模态框显示
    }
  },
  methods: {
    handleCancel () {
      // 取消操作
      this.showDialog = false
    },
    handleConfirm () {
      // 确认操作
      // 清除 Vuex 和 LocalStorage 的 token
      this.$store.commit('setAccessToken', null)
      this.$store.commit('setRefreshToken', null)
      this.$store.commit('setUsername', null) // 清除 Vuex 中的 username
      localStorage.removeItem('access_token')
      localStorage.removeItem('refresh_token')
      localStorage.removeItem('token_expire')
      localStorage.removeItem('username') // 清除 LocalStorage 中的 username

      // 跳转到登录页
      this.$router.push('/logon')
    }
  }
}
</script>

<style scoped>
.logout {
  text-align: center;
  margin-top: 50px;
}

.el-button {
  margin-top: 20px;
}
</style>
